<script setup lang="ts">
// props的 vue3 + js 写法
// defineProps({
//   money: {
//     type: Number,
//     required: true
//   },
//   car: {
//     type: String,
//     required: false,
//     default: '小黄车'
//   }
// })

// props的vue3 + ts 写法
// defineProps<{
//   money: number
//   car?: string
// }>()

// ts 给props设置默认值
// withDefaults(defineProps<{
//   money: number
//   car?: string
// }>(), {
//   car: '小黄车'
// })

const {money, car = '小黄车'} = defineProps<{
  money: number
  car?: string
}>()

// js写法
// const emit = defineEmits(['changeMoney', 'changeCar'])

// ts写法

const emit = defineEmits<{
  (e: 'changeMoney', money: number): void
  (e: 'changeCar', car: string): void
}>()

const changeMoney = () => {
  emit('changeMoney', 10)
}
const changeCar = () => {
  emit('changeCar', '法拉利')
}
</script>

<template>
  <div class="child-page">
    我是子组件
    <p>
      钱: {{money}}------ 车: {{car}}
    </p>
    <button @click="changeMoney">花钱</button>
    <button @click="changeCar">换车</button>
  </div>
</template>

<style lang="scss" scoped></style>
